<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="gp" uri="http://gp.componentesx"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Componente-Accordion</title>


<script src="${pageContext.request.contextPath}/resources/componentes/importacoes/jquery-ui-1.11.4.custom/external/jquery/jquery-1.10.2.js"></script>
<script src="${pageContext.request.contextPath}/resources/componentes/importacoes/jquery-ui-1.11.4.custom/jquery-ui.js"></script>

<%-- <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/componentes/accordion-jsp/css/accordion.css">  --%>
<%-- <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/componentes/importacoes/jquery-ui-1.11.4.custom/jquery-ui.css"> --%>
<%-- <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/resources/componentes/importacoes/jquery-ui-1.11.4.custom/jquery-ui.theme.css"/> --%>
<%-- <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/resources/componentes/importacoes/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css"/> --%>

</head>
<body>

	<div id="${idAccordion}">
	
		${bodyAccordion}
		
	</div>

	<script type="text/javascript" src="${pageContext.request.contextPath}/resources/componentes/accordion/js/accordion.js"></script>
	
	<script type="text/javascript">

		var ac = new Accordion();

		// JSON UTILIZADO PARAA CONSTRUÇÃO DO ACCORDION
		var json = {};

		// JSON AUXILIAR PARA ICONES. ELE AUXILIA O JSON QUE CRIA O ACCORDION
		var jsonIcons = {};

		var idAccordion = "${idAccordion}";
		var form = "${form}";
		var idHeader = "${idHeader}";
		var idBody = "${idBody}";
		var caminhoImg = "<img src= '" + "${pageContext.request.contextPath}/resources/componentes-jsp/accordion/img/close.png" + "' />";

		// VERIFICANDO SE ACTIVE ESTÁ VAZIO
		<c:if test = "${not empty active}">

			json = $.extend(json, {"active": "${active}" });
			
		</c:if>			

		// VERIFICANDO SE COLLAPSIBLE ESTÁ VAZIO
		<c:if test = "${not empty collapsible}">

			json = $.extend(json, {"collapsible": "${collapsible}" });

		</c:if>		

		// VERIFICANDO SE ANIMATE ESTÁ VAZIO
		<c:if test = "${not empty animate}">

			// VERIFICANDO SE HEADER É O MESMO PARÂMETRO QUE ATIVA O EFEITO ELASTICO
			<c:if test = "${animate eq 'elastic'}">
	
				json = $.extend(json, {"animate": "easeInOutElastic" });
	
			</c:if>			

			// VERIFICANDO SE HEADER É O MESMO PARÂMETRO QUE ATIVA O EFEITO SWING
			<c:if test = "${animate eq 'swing'}">
	
				json = $.extend(json, {"animate": "swing" });
	
			</c:if>			

			// VERIFICANDO SE HEADER É O MESMO PARÂMETRO QUE ATIVA O EFEITO BOUNCE
			<c:if test = "${animate eq 'bounce'}">
	
				json = $.extend(json, {"animate": "easeOutBounce" });
	
			</c:if>			
			

		</c:if>		

		// VERIFICANDO SE ICONHEADER ESTÁ VAZIO
		<c:if test = "${not empty iconHeader}">

			// VERIFICANDO SE HEADER É O MESMO PARÂMETRO QUE ATIVA O ICONE ARROW
			<c:if test = "${iconHeader eq 'arrow'}">
	
				jsonIcons = $.extend(jsonIcons, {"header": "ui-icon-arrowreturnthick-1-w" });
	
			</c:if>			

			// VERIFICANDO SE HEADER É O MESMO PARÂMETRO QUE ATIVA O ICONE PLUS
			<c:if test = "${iconHeader eq 'plus'}">
	
				jsonIcons = $.extend(jsonIcons, {"header": "ui-icon-plus" });
	
			</c:if>			

			// VERIFICANDO SE HEADER É O MESMO PARÂMETRO QUE ATIVA O ICONE TRIÂNGULO
			<c:if test = "${iconHeader eq 'triangle'}">
	
				jsonIcons = $.extend(jsonIcons, {"header": "ui-icon-triangle-1-e" });
	
			</c:if>			
			
		</c:if>		
		
		// VERIFICANDO SE ICONACTIVEHEADER ESTÁ VAZIO
		<c:if test = "${not empty iconActiveHeader}">
		
			// VERIFICANDO SE ACTIVEHEADER É O MESMO PARÂMETRO QUE ATIVA O ICONE ARROW
			<c:if test = "${iconActiveHeader eq 'arrowOpen'}">
	
				jsonIcons = $.extend(jsonIcons, {"activeHeader": "ui-icon-arrowreturnthick-1-s" });
	
			</c:if>			
	
			// VERIFICANDO SE ACTIVEHEADER É O MESMO PARÂMETRO QUE ATIVA O ICONE PLUS
			<c:if test = "${iconActiveHeader eq 'minusOpen'}">

				jsonIcons = $.extend(jsonIcons, {"activeHeader": "ui-icon-minus" });
	
			</c:if>			
	
			// VERIFICANDO SE ACTIVEHEADER É O MESMO PARÂMETRO QUE ATIVA O ICONE TRIÂNGULO
			<c:if test = "${iconActiveHeader eq 'triangleOpen'}">
	
				jsonIcons = $.extend(jsonIcons, {"activeHeader": "ui-icon-triangle-1-se" });
	
			</c:if>			
			
		</c:if>		
		
		// ADICIONANDO O JSONICONS DENTRO DO JSON DE CRIAÇÃO DO ACCORDION
		json = $.extend(json, {"icons": jsonIcons});
		
		// VERIFICANDO SE HEIGHTSTYLE ESTÁ VAZIO
		<c:if test = "${not empty heightStyle}">

			json = $.extend(json, {"heightStyle": "${heightStyle}" });

		</c:if>

		// VERIFICANDO SE EVENT ESTÁ VAZIO
		<c:if test = "${not empty event}">

			json = $.extend(json, {"event": "${event}" });

		</c:if>
		
		//******************************************************************* CONSTRUINDO O ACCORDION
		
		
		if(json != undefined){

			ac.createAccordion("#" + form + " " + "#" + idAccordion, json);
			
		}else{
			
			ac.createAccordion("#" + form + " " + "#" + idAccordion);

		}
		
	</script>

</body>
</html>